import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber, Upload, Button, Icon,Table, Select, Radio } from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
  title: any
  nameList:any
  onSubmit: (fieldsValue: any,title: any) => any;
  onCancel: () => void;
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const {nameList, dataModalVisible, form, onSubmit: handleSubmit, onCancel,
    common, isUpdate,dataFormValues,title } = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [langList, setLangList] = useState<any>(nameList || []);

  //提交表单
  const okHandle = () => {
    console.log(langList,title);
    handleSubmit(langList,title);
  };

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(dataFormValues.file_url)

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const imgList: any = [];
  const dtImgList: any = [];
  const rankChangeList: any = [];
  

//上传图片列表列
const columns = [
  {
    title: '标签',
    dataIndex: 'key',
  },
  {
    title: '语言描述',
    dataIndex: 'text',
  },
  {
    title: '内容',
    dataIndex: 'lang_content',
    width:'50%',
    render: (text, record, index) => (
      <Input value={record.lang_content} onChange={e => { rankChange(record, e.target.value, index) }} />
    )
  },
];
const rankChange = (record, value, index) => {
  console.log(record, value)
  if (nameList.length > 0) {
    nameList.map((item, index) => {
      rankChangeList.push(item)
    })
  }
  rankChangeList[index].lang_content = value ? value : '';
  console.log('rankChangeList', rankChangeList)
  // handleName(rankChangeList);
  setLangList(rankChangeList);
};

  // 弹出框
  // @ts-ignore
  return <Modal
    destroyOnClose
    title={'多语言名称设置'}
    width={DataHelper.DEFAULT_MODAL_WIDTH}
    visible={dataModalVisible}
    onOk={okHandle}
    onCancel={() => onCancel()}
  >
    <FormItem wrapperCol={{ span: 24 }}>
      <Table
        columns={columns}
        dataSource={nameList}
        pagination={false}
      />
    </FormItem>


    
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </Modal>;
};

export default Form.create<DataFormProps>()(DataForm);
